<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            
            margin:0 auto;
            /* border:3px solid red; */
            text-align:center;
            
            }
    </style>
</head>
<body>
    <div id="app">
        <h3>第二章(第1题)</h3>
        <input type="text"v-model="singleText" style="width:240px;">
        <p>{{ singleText }}</p>
        
        <h3>第二章(第2题)</h3>

        <input type="text" v-model="n1">
            <select v-model="opt">
            <option value="+" >+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/"> /</option>
            </select>
            <input type="text" v-model="n2">
            <input type="button" value="=" @click="calculator">
            <input type="text" v-model="result">
            
   

    </div>
    <script type="text/javaScript"  charset="UTF-8" src="/JS文件/vue.js"></script>
    <script>

        let vm=new Vue({
            el:'#app',
            data:{
                    singleText:'无',   
                    n1: 0,
                    n2: 0,
                    opt: '+',
                    result: 0,

            },
            methods: {
                calculator(){
                    switch (this.opt) {
                            case '+':
                            this.result = Number(this.n1) +Number(this.n2);
                            break ;
                            case '-':
                            this.result = Number (this.n1) - Number (this.n2);
                            break;
                            case "*":
                            this.result = Number(this.n1) * Number (this.n2);
                            break;
                            case "/":
                            this.result = Number (this.n1)/ Number (this.n2);
                            break;
                        }
                }
            },
        })




    </script>
</body>
</html>